@import '~components/constants.scss';

.animated_background {
  width: 100%;
  height: 60vh;
  position: relative;
  background: $primary;

  .animated_shape {
    background: #fff;
    top: calc(100% + 50px);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: animated_background_shape_animation;
    position: absolute;
    border-radius: $base_border_radius;
  }
  .animated_shape.circle {
    border-radius: 100%;
    animation-name: animated_background_shape_animation_circle;
  }
}

@keyframes animated_background_shape_animation {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-100vh) rotate(600deg);
    opacity: 0;
  }
}

@keyframes animated_background_shape_animation_circle {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-100vh);
    opacity: 0;
  }
}
